<!DOCTYPE html>
<html lang="zh-CN" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>前端知识点之http篇 | Nuobel</title>
    <meta name="description" content="Nuobel 诺贝尔的源泉">
    <link rel="preload stylesheet" href="/assets/style.6550a0c8.css" as="style">
    <link rel="modulepreload" href="/assets/app.6facf8ba.js">
    <link rel="modulepreload" href="/assets/blog_interviews_http-for-frontend-interview-questions-collection.md.1129730d.lean.js">
    
    <meta name="theme-color" content="#3c8772">
  <script>var _hmt=_hmt||[];(function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?b812ad2761f4f77a87ce9b80c0cae4a0";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})();</script>
  <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-93a960b4><!--[--><!--]--><!--[--><span tabindex="-1" data-v-151f2593></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-151f2593> Skip to content </a><!--]--><!----><header class="VPNav" data-v-93a960b4 data-v-0fa0e57d><div class="VPNavBar has-sidebar" data-v-0fa0e57d data-v-be450ad9><div class="container" data-v-be450ad9><div class="title" data-v-be450ad9><div class="VPNavBarTitle has-sidebar" data-v-be450ad9 data-v-6d2fb2d9><a class="title" href="/" data-v-6d2fb2d9><!--[--><!--]--><!----><!--[-->Nuobel<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-be450ad9><div class="curtain" data-v-be450ad9></div><div class="content-body" data-v-be450ad9><!--[--><!--]--><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-be450ad9 data-v-bdedfc22><span id="main-nav-aria-label" class="visually-hidden" data-v-bdedfc22>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/blog/frontend/library.html" data-v-bdedfc22 data-v-95f5d58b data-v-30c06bd3><!--[-->博客<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/blog/summary/20210806.html" data-v-bdedfc22 data-v-95f5d58b data-v-30c06bd3><!--[-->日记周记<!--]--><!----></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-bdedfc22 data-v-96001b6b><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-96001b6b><span class="text" data-v-96001b6b><!----> 读书笔记 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-96001b6b><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-96001b6b><div class="VPMenu" data-v-96001b6b data-v-e7ea1737><div class="items" data-v-e7ea1737><!--[--><!--[--><div class="VPMenuGroup" data-v-e7ea1737 data-v-b66affaf><p class="title" data-v-b66affaf>前端技术</p><!--[--><!--[--><div class="VPMenuLink" data-v-b66affaf data-v-a5bbb52c><a class="VPLink link" href="/blog/svg/rumen.html" data-v-a5bbb52c data-v-30c06bd3><!--[-->SVG基础入门<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-b66affaf data-v-a5bbb52c><a class="VPLink link" href="/blog/readingNotes/browserPrinciple.html" data-v-a5bbb52c data-v-30c06bd3><!--[-->浏览器工作原理与实践<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-b66affaf data-v-a5bbb52c><a class="VPLink link" href="/blog/readingNotes/reactAndNodeJS.html" data-v-a5bbb52c data-v-30c06bd3><!--[-->react+Node.js开发实战<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-b66affaf data-v-a5bbb52c><a class="VPLink link" href="/blog/readingNotes/jsgc4.html" data-v-a5bbb52c data-v-30c06bd3><!--[-->javascript高级程序设计第4版<!--]--><!----></a></div><!--]--><!--]--></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/blog/interviews/" data-v-bdedfc22 data-v-95f5d58b data-v-30c06bd3><!--[-->面试<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/photograph/home.html" data-v-bdedfc22 data-v-95f5d58b data-v-30c06bd3><!--[-->摄影<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/english/plan.html" data-v-bdedfc22 data-v-95f5d58b data-v-30c06bd3><!--[-->英语<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/wemedia/what.html" data-v-bdedfc22 data-v-95f5d58b data-v-30c06bd3><!--[-->自媒体<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/life/index.html" data-v-bdedfc22 data-v-95f5d58b data-v-30c06bd3><!--[-->生活<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/about/me.html" data-v-bdedfc22 data-v-95f5d58b data-v-30c06bd3><!--[-->关于 <!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-be450ad9 data-v-da3f667a><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" aria-checked="false" data-v-da3f667a data-v-0d529b6d data-v-f3c41672><span class="check" data-v-f3c41672><span class="icon" data-v-f3c41672><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-0d529b6d><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-0d529b6d><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-be450ad9 data-v-66bb1f24 data-v-96001b6b><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-96001b6b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-96001b6b><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-96001b6b><div class="VPMenu" data-v-96001b6b data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-66bb1f24><div class="item appearance" data-v-66bb1f24><p class="label" data-v-66bb1f24>Appearance</p><div class="appearance-action" data-v-66bb1f24><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" aria-checked="false" data-v-66bb1f24 data-v-0d529b6d data-v-f3c41672><span class="check" data-v-f3c41672><span class="icon" data-v-f3c41672><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-0d529b6d><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-0d529b6d><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-be450ad9 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav" data-v-93a960b4 data-v-2817d72e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-2817d72e><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-2817d72e><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-2817d72e>菜单</span></button><a class="top-link" href="#" data-v-2817d72e>回到顶部</a></div><aside class="VPSidebar" data-v-93a960b4 data-v-c79ccefa><div class="curtain" data-v-c79ccefa></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-c79ccefa><span class="visually-hidden" id="sidebar-aria-label" data-v-c79ccefa> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-c79ccefa><section class="VPSidebarItem level-0 has-active" data-v-c79ccefa data-v-b05232f3><!----><div class="items" data-v-b05232f3><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b05232f3 data-v-b05232f3><div class="item" data-v-b05232f3><div class="indicator" data-v-b05232f3></div><a class="VPLink link link" href="/blog/interviews/html-for-frontend-interview-questions-collection.html" data-v-b05232f3 data-v-30c06bd3><!--[--><p class="text" data-v-b05232f3>前端知识点之html篇</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b05232f3 data-v-b05232f3><div class="item" data-v-b05232f3><div class="indicator" data-v-b05232f3></div><a class="VPLink link link" href="/blog/interviews/css-for-frontend-interview-questions-collection.html" data-v-b05232f3 data-v-30c06bd3><!--[--><p class="text" data-v-b05232f3>前端知识点之css篇</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b05232f3 data-v-b05232f3><div class="item" data-v-b05232f3><div class="indicator" data-v-b05232f3></div><a class="VPLink link link" href="/blog/interviews/javascript-for-frontend-interview-questions-collection.html" data-v-b05232f3 data-v-30c06bd3><!--[--><p class="text" data-v-b05232f3>前端知识点之JavaScript篇</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b05232f3 data-v-b05232f3><div class="item" data-v-b05232f3><div class="indicator" data-v-b05232f3></div><a class="VPLink link link" href="/blog/interviews/react-for-frontend-interview-questions-collection.html" data-v-b05232f3 data-v-30c06bd3><!--[--><p class="text" data-v-b05232f3>前端知识点之react篇</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link is-active has-active" data-v-b05232f3 data-v-b05232f3><div class="item" data-v-b05232f3><div class="indicator" data-v-b05232f3></div><a class="VPLink link link" href="/blog/interviews/http-for-frontend-interview-questions-collection.html" data-v-b05232f3 data-v-30c06bd3><!--[--><p class="text" data-v-b05232f3>前端知识点之http篇</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b05232f3 data-v-b05232f3><div class="item" data-v-b05232f3><div class="indicator" data-v-b05232f3></div><a class="VPLink link link" href="/blog/interviews/babel-for-frontend-interview-questions-collection.html" data-v-b05232f3 data-v-30c06bd3><!--[--><p class="text" data-v-b05232f3>前端知识点之babel篇</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b05232f3 data-v-b05232f3><div class="item" data-v-b05232f3><div class="indicator" data-v-b05232f3></div><a class="VPLink link link" href="/blog/interviews/webpack-for-frontend-interview-questions-collection.html" data-v-b05232f3 data-v-30c06bd3><!--[--><p class="text" data-v-b05232f3>前端知识点之webpack篇</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b05232f3 data-v-b05232f3><div class="item" data-v-b05232f3><div class="indicator" data-v-b05232f3></div><a class="VPLink link link" href="/blog/interviews/project-for-frontend-interview-questions-collection.html" data-v-b05232f3 data-v-30c06bd3><!--[--><p class="text" data-v-b05232f3>前端知识点之项目篇</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b05232f3 data-v-b05232f3><div class="item" data-v-b05232f3><div class="indicator" data-v-b05232f3></div><a class="VPLink link link" href="/blog/interviews/safe-for-frontend-interview-questions-collection.html" data-v-b05232f3 data-v-30c06bd3><!--[--><p class="text" data-v-b05232f3>前端知识点之安全篇</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b05232f3 data-v-b05232f3><div class="item" data-v-b05232f3><div class="indicator" data-v-b05232f3></div><a class="VPLink link link" href="/blog/interviews/pingtouge-interview-questions-collection.html" data-v-b05232f3 data-v-30c06bd3><!--[--><p class="text" data-v-b05232f3>前端面试题集锦之平头哥外包</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b05232f3 data-v-b05232f3><div class="item" data-v-b05232f3><div class="indicator" data-v-b05232f3></div><a class="VPLink link link" href="/blog/interviews/mian-shi-xin-de.html" data-v-b05232f3 data-v-30c06bd3><!--[--><p class="text" data-v-b05232f3>面试心得体会</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b05232f3 data-v-b05232f3><div class="item" data-v-b05232f3><div class="indicator" data-v-b05232f3></div><a class="VPLink link link" href="/blog/interviews/algorithm-javascript.html" data-v-b05232f3 data-v-30c06bd3><!--[--><p class="text" data-v-b05232f3>算法之javascript描述</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-93a960b4 data-v-0bd490fb><div class="VPDoc has-sidebar has-aside" data-v-0bd490fb data-v-c5936a1e><div class="container" data-v-c5936a1e><div class="aside" data-v-c5936a1e><div class="aside-curtain" data-v-c5936a1e></div><div class="aside-container" data-v-c5936a1e><div class="aside-content" data-v-c5936a1e><div class="VPDocAside" data-v-c5936a1e data-v-cdc66372><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" data-v-cdc66372 data-v-5dd9d5f6><div class="content" data-v-5dd9d5f6><div class="outline-marker" data-v-5dd9d5f6></div><div class="outline-title" data-v-5dd9d5f6>本页目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-5dd9d5f6><span class="visually-hidden" id="doc-outline-aria-label" data-v-5dd9d5f6> Table of Contents for current page </span><ul class="root" data-v-5dd9d5f6 data-v-1188541a><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-cdc66372></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-c5936a1e><div class="content-container" data-v-c5936a1e><!--[--><!--]--><main class="main" data-v-c5936a1e><div style="position:relative;" class="vp-doc _blog_interviews_http-for-frontend-interview-questions-collection" data-v-c5936a1e><div><h2 id="http-协议的主要特点" tabindex="-1">http 协议的主要特点 <a class="header-anchor" href="#http-协议的主要特点" aria-hidden="true">#</a></h2><h3 id="简单快速" tabindex="-1">简单快速 <a class="header-anchor" href="#简单快速" aria-hidden="true">#</a></h3><p>资源都是通过 URL 定位，想要获取什么资源，输入 url 即可获取。</p><h3 id="灵活" tabindex="-1">灵活 <a class="header-anchor" href="#灵活" aria-hidden="true">#</a></h3><p>通过请求头以及返回头可以获取任何资源类型，以及增减自定义数据头部。</p><h3 id="无连接" tabindex="-1">无连接 <a class="header-anchor" href="#无连接" aria-hidden="true">#</a></h3><p>资源获取完成即断开连接。</p><h3 id="无状态" tabindex="-1">无状态 <a class="header-anchor" href="#无状态" aria-hidden="true">#</a></h3><p>服务端默认情况下并不知道第一次和第二次连接是否是同一个客户端。</p><h2 id="http-报文组成" tabindex="-1">http 报文组成 <a class="header-anchor" href="#http-报文组成" aria-hidden="true">#</a></h2><h3 id="请求报文" tabindex="-1">请求报文 <a class="header-anchor" href="#请求报文" aria-hidden="true">#</a></h3><p>第一行，依次是请求方法、请求 URL、协议版本</p><p>第二行开始直到空行，每一行一个<code>key:value</code>形式的请求头信息</p><p>然后是空行</p><p>空行后是请求体</p><p>如下示例：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#A6ACCD;">POST </span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">resource</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">login</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">mp4 HTTP</span><span style="color:#89DDFF;">/</span><span style="color:#F78C6C;">1.1</span></span>
<span class="line"><span style="color:#FFCB6B;">Host</span><span style="color:#89DDFF;">:</span><span style="color:#F78C6C;">192.168</span><span style="color:#89DDFF;">.</span><span style="color:#F78C6C;">9.1</span></span>
<span class="line"><span style="color:#FFCB6B;">Origin</span><span style="color:#89DDFF;">:</span><span style="color:#FFCB6B;">http</span><span style="color:#89DDFF;">:</span><span style="color:#676E95;font-style:italic;">//192.168.9.1</span></span>
<span class="line"><span style="color:#FFCB6B;">Referer</span><span style="color:#89DDFF;">:</span><span style="color:#FFCB6B;">http</span><span style="color:#89DDFF;">:</span><span style="color:#676E95;font-style:italic;">//192.168.9.1/home</span></span>
<span class="line"><span style="color:#FFCB6B;">Connection</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">keep</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">alive</span></span>
<span class="line"><span style="color:#A6ACCD;">User</span><span style="color:#89DDFF;">-</span><span style="color:#FFCB6B;">Agent</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">Mozilla</span><span style="color:#89DDFF;">/</span><span style="color:#F78C6C;">5.0</span><span style="color:#89DDFF;">...</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">{</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">id</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">:</span><span style="color:#F78C6C;">123</span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><h3 id="响应报文" tabindex="-1">响应报文 <a class="header-anchor" href="#响应报文" aria-hidden="true">#</a></h3><p>第一行，依次是协议版本、状态码、状态描述</p><p>第二行开始直到空行，每一行一个<code>key:value</code>形式的返回头信息</p><p>然后是空行</p><p>空行后是响应数据</p><p>如下示例：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#A6ACCD;">HTTP</span><span style="color:#89DDFF;">/</span><span style="color:#F78C6C;">1.1</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">200</span><span style="color:#A6ACCD;"> OK</span></span>
<span class="line"><span style="color:#A6ACCD;">Content</span><span style="color:#89DDFF;">-</span><span style="color:#FFCB6B;">Type</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">application</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">json</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">charset</span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;">utf</span><span style="color:#89DDFF;">-</span><span style="color:#F78C6C;">8</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">{</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">userName</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">:</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">huyu</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><h2 id="http-状态码" tabindex="-1">http 状态码 <a class="header-anchor" href="#http-状态码" aria-hidden="true">#</a></h2><p>更多资料参考<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status" target="_blank" rel="noreferrer">MDN</a></p><h3 id="五类响应" tabindex="-1">五类响应 <a class="header-anchor" href="#五类响应" aria-hidden="true">#</a></h3><ul><li>100-199 信息响应</li><li>200-299 成功响应</li><li>300-399 重定向</li><li>400-499 客户端错误</li><li>500-599 服务器错误</li></ul><h3 id="常用状态码" tabindex="-1">常用状态码 <a class="header-anchor" href="#常用状态码" aria-hidden="true">#</a></h3><h4 id="_100-continue" tabindex="-1">100 Continue <a class="header-anchor" href="#_100-continue" aria-hidden="true">#</a></h4><p>告诉客户端，这个请求是可行的，可以继续请求。</p><p>一般用在，比如请求体比较大时，不知道请求接口是否可用，可以先发送此请求，服务端返回 100，则客户端下次请求带上 body。避免接口不可以用时的资源浪费</p><h4 id="_101-switching-protocols" tabindex="-1">101 Switching Protocols <a class="header-anchor" href="#_101-switching-protocols" aria-hidden="true">#</a></h4><p>表示协议切换，在<code>Websocket</code>中可以见到</p><p>客户端发送升级协议请求：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#A6ACCD;">GET </span><span style="color:#FFCB6B;">ws</span><span style="color:#89DDFF;">:</span><span style="color:#676E95;font-style:italic;">//192.168.9.2 HTTP/1.1</span></span>
<span class="line"><span style="color:#FFCB6B;">Upgrade</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">websocket</span></span>
<span class="line"><span style="color:#FFCB6B;">Connection</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">Upgrade</span></span>
<span class="line"></span></code></pre></div><p>服务端响应协议切换请求：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#A6ACCD;">HTTP</span><span style="color:#89DDFF;">/</span><span style="color:#F78C6C;">1.1</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">101</span><span style="color:#A6ACCD;"> Switching Protocols</span></span>
<span class="line"><span style="color:#FFCB6B;">upgrade</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">websocket</span></span>
<span class="line"><span style="color:#FFCB6B;">connection</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">upgrade</span></span>
<span class="line"></span></code></pre></div><h4 id="_200-ok" tabindex="-1">200 OK <a class="header-anchor" href="#_200-ok" aria-hidden="true">#</a></h4><p>表示请求成功，成功的具体含义根据请求方法而不同：</p><ul><li>GET：资源已被提取并在消息正文中传输</li><li>POST：描述动作结果的资源正在消息体中传输</li></ul><h4 id="_206-partial-content" tabindex="-1">206 Partial Content <a class="header-anchor" href="#_206-partial-content" aria-hidden="true">#</a></h4><p>表示服务端响应了客户端发送的带有<code>Range</code>头的请求，一般用来请求大文件的一部分数据，通常用在视频、音频数据或断点续传等应用</p><p>如下示例，客户端发送带 range 头的请求，告知服务端返回文件的哪一部分：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#A6ACCD;">GET </span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">login</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">mp4 HTTP</span><span style="color:#89DDFF;">/</span><span style="color:#F78C6C;">1.1</span></span>
<span class="line"><span style="color:#FFCB6B;">Range</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">bytes</span><span style="color:#89DDFF;">=</span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">-</span><span style="color:#F78C6C;">255321</span></span>
<span class="line"></span></code></pre></div><p>服务器响应：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#A6ACCD;">HTTP</span><span style="color:#89DDFF;">/</span><span style="color:#F78C6C;">1.1</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">206</span><span style="color:#A6ACCD;"> Partial Content</span></span>
<span class="line"><span style="color:#A6ACCD;">Content</span><span style="color:#89DDFF;">-</span><span style="color:#FFCB6B;">Type</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">video</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">mp4</span></span>
<span class="line"><span style="color:#A6ACCD;">Content</span><span style="color:#89DDFF;">-</span><span style="color:#FFCB6B;">Range</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">bytes </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">-</span><span style="color:#F78C6C;">255321</span><span style="color:#89DDFF;">/</span><span style="color:#F78C6C;">644660</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">...</span><span style="color:#F78C6C;">255322</span><span style="color:#A6ACCD;"> bytes </span><span style="color:#89DDFF;">of</span><span style="color:#A6ACCD;"> partial video data</span></span>
<span class="line"></span></code></pre></div><h4 id="_301-moved-permanently" tabindex="-1">301 Moved Permanently <a class="header-anchor" href="#_301-moved-permanently" aria-hidden="true">#</a></h4><p>表示请求的资源已被永久移到了新位置，并且以后的请求都应该使用此次响应返回的<code>Location</code>头部定义的 URL 上</p><p>另外，在进行重定向时，不需要修改 http method 和 body。可能有些代理不会这样做，所以建议使用<code>308 Permanent Redirect</code>，表示重定向时不要修改请求方法。</p><p>这个响应是可缓存的，除非特别指定不缓存。</p><h4 id="_302-found" tabindex="-1">302 Found <a class="header-anchor" href="#_302-found" aria-hidden="true">#</a></h4><p>表示请求的资源被暂时移到了此次响应头返回的<code>Location</code>指定的 URL 上，浏览器将会重定向并获取资源。</p><p>但因为是临时的，所以以后的请求还是应该以重定向前的 URL 来访问。</p><p>除非指定了<code>Cache-Control</code>或<code>Expires</code>，否则不应该缓存此请求。</p><h4 id="_304-not-modified" tabindex="-1">304 Not Modified <a class="header-anchor" href="#_304-not-modified" aria-hidden="true">#</a></h4><p>客户端发送了一个带条件的请求，比如带上请求头<code>If-Modified-Since</code>或<code>If-None-Match</code>，而服务器根据请求条件，如果资源并没有改变，则返回此状态码，否则返回最新的响应数据。</p><p>304 请求是禁止响应体的，所以响应报文到空行就应该结束了。</p><p>上面的请求条件对应的服务端返回头部是<code>Last-Modified</code>或<code>Etag</code></p><p>此状态码在协商缓存时触发，即当服务器返回头有<code>Cache-Control:no-cache</code>时。</p><h4 id="_400-bad-request" tabindex="-1">400 Bad Request <a class="header-anchor" href="#_400-bad-request" aria-hidden="true">#</a></h4><p>1.语义有误，服务器无法理解此请求，请修改后再请求</p><p>2.请求参数错误</p><h4 id="_401-unauthorized" tabindex="-1">401 Unauthorized <a class="header-anchor" href="#_401-unauthorized" aria-hidden="true">#</a></h4><p>表示该资源需要身份验证凭证，或者已带上凭证，表示该凭证被拒绝</p><p>表示客户端应该请求需带上<code>Authorization</code>请求头作为凭证</p><h4 id="_403-forbidden" tabindex="-1">403 Forbidden <a class="header-anchor" href="#_403-forbidden" aria-hidden="true">#</a></h4><p>禁止访问此资源，请不要重复提交该请求</p><h4 id="_404-not-found" tabindex="-1">404 Not Found <a class="header-anchor" href="#_404-not-found" aria-hidden="true">#</a></h4><p>该资源未在服务器上被找到</p><h4 id="_405-method-not-allowed" tabindex="-1">405 Method Not Allowed <a class="header-anchor" href="#_405-method-not-allowed" aria-hidden="true">#</a></h4><p>请求的方法不被允许请求该资源，此响应会返回一个<code>Allow</code>头部，表示该资源可以用哪些请求方法访问。</p><h4 id="_500-internal-server-error" tabindex="-1">500 Internal Server Error <a class="header-anchor" href="#_500-internal-server-error" aria-hidden="true">#</a></h4><p>服务器遇到了不知如何处理的错误</p><h4 id="_502-bad-gateway" tabindex="-1">502 Bad Gateway <a class="header-anchor" href="#_502-bad-gateway" aria-hidden="true">#</a></h4><p>表示服务器是一个网关，希望得到一个处理这个请求的响应，却得到了一个错误的响应。</p><h4 id="_503-service-unavailable" tabindex="-1">503 Service Unavailable <a class="header-anchor" href="#_503-service-unavailable" aria-hidden="true">#</a></h4><p>表示服务器未准备好处理请求，一般是因为服务器过载繁忙，或维护宕机，请过段时间再请求。</p><h2 id="http-请求方法" tabindex="-1">http 请求方法 <a class="header-anchor" href="#http-请求方法" aria-hidden="true">#</a></h2><h3 id="有哪些方法" tabindex="-1">有哪些方法 <a class="header-anchor" href="#有哪些方法" aria-hidden="true">#</a></h3><h4 id="get" tabindex="-1">GET <a class="header-anchor" href="#get" aria-hidden="true">#</a></h4><p>请求一个资源，用于获取数据</p><h4 id="head" tabindex="-1">HEAD <a class="header-anchor" href="#head" aria-hidden="true">#</a></h4><p>获得一个与 GET 请求相同的响应，但没有响应体。一般用于获取响应头部信息。</p><p>比如在请求一个大文件前，先来一个 HEAD 请求，获取<code>Content-Length</code>返回头，取得具体资源大小。</p><h4 id="post" tabindex="-1">POST <a class="header-anchor" href="#post" aria-hidden="true">#</a></h4><p>将实体提交到服务器，通常会改变服务器资源的状态，产生副作用</p><h4 id="options" tabindex="-1">OPTIONS <a class="header-anchor" href="#options" aria-hidden="true">#</a></h4><p>该请求用来获得对应资源的通信选项。CORS 的预检请求就是这种方式，获取对应的请求选项是否被允许。</p><h4 id="put" tabindex="-1">PUT <a class="header-anchor" href="#put" aria-hidden="true">#</a></h4><p>用的比较少，用请求体更新对应的资源</p><h4 id="delete" tabindex="-1">DELETE <a class="header-anchor" href="#delete" aria-hidden="true">#</a></h4><p>用的比较少，删除对应资源</p><h3 id="get-和-post-的几点区别" tabindex="-1">GET 和 POST 的几点区别 <a class="header-anchor" href="#get-和-post-的几点区别" aria-hidden="true">#</a></h3><p>主要说出以下几点：</p><ul><li>GET 参数在 URL 中，POST 一般在请求体中</li><li>GET 请求浏览器会主动缓存，POST 不会</li><li>浏览器回退时，GET 请求不会重新请求，而 POST 会</li><li>GET 请求的 URL 可以方便被收藏，而 POST 不方便</li><li>GET 请求参数长度有限制，比如 2kb，而 POST 没有</li><li>POST 相比 GET 更安全，因为 GET 的参数是直接暴露在 URL 上的，而 POST 不会</li></ul><h3 id="post-请求-content-type-值" tabindex="-1">POST 请求 Content-Type 值 <a class="header-anchor" href="#post-请求-content-type-值" aria-hidden="true">#</a></h3><p>这里一般要说出以下几点，常用的<code>Content-Type</code>值：</p><ul><li><code>application/x-www-form-urlencoded</code></li></ul><p>数据被编码成以<code>&amp;</code>分割的键值对，同时以<code>=</code>分割键和值。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> xhr </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">XMLHttpRequest</span><span style="color:#A6ACCD;">()</span></span>
<span class="line"><span style="color:#A6ACCD;">xhr</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">open</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">POST</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> url)</span></span>
<span class="line"><span style="color:#A6ACCD;">xhr</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">setRequestHeader</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Content-Type</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">application/x-www-form-urlencoded</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> body </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">a=1&amp;b=2</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#A6ACCD;">xhr</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">send</span><span style="color:#A6ACCD;">(body)</span></span>
<span class="line"></span></code></pre></div><ul><li><code>text/plain</code></li></ul><p>发送一段文本，服务器当文本数据解析</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> xhr </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">XMLHttpRequest</span><span style="color:#A6ACCD;">()</span></span>
<span class="line"><span style="color:#A6ACCD;">xhr</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">open</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">POST</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> url)</span></span>
<span class="line"><span style="color:#A6ACCD;">xhr</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">setRequestHeader</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Content-Type</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">text/plain</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> body </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">fds</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#A6ACCD;">xhr</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">send</span><span style="color:#A6ACCD;">(body)</span></span>
<span class="line"></span></code></pre></div><ul><li><code>multipart/form-data</code></li></ul><p>和表单一样的格式，可上传二进制等数据。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> xhr </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">XMLHttpRequest</span><span style="color:#A6ACCD;">()</span></span>
<span class="line"><span style="color:#A6ACCD;">xhr</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">open</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">POST</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> url)</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 这个不用设置，浏览器自动识别</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// xhr.setRequestHeader(&quot;Content-Type&quot;, &quot;multipart/form-data&quot;)</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> body </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">FormData</span><span style="color:#A6ACCD;">()</span></span>
<span class="line"><span style="color:#A6ACCD;">body</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">append</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">name</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">huyu</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">xhr</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">send</span><span style="color:#A6ACCD;">(body)</span></span>
<span class="line"></span></code></pre></div><ul><li><code>application/json</code></li></ul><p>发送 json 字符串，服务器会当作 json 数据去解析</p><p>要注意的是这个请求头属于复杂请求了，浏览器会发送预检请求，服务器需返回允许修改<code>Content-Type</code>请求头的返回头：</p><blockquote><p>Access-Control-Allow-Headers:Content-Type</p></blockquote><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> xhr </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">XMLHttpRequest</span><span style="color:#A6ACCD;">()</span></span>
<span class="line"><span style="color:#A6ACCD;">xhr</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">open</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">POST</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> url)</span></span>
<span class="line"><span style="color:#A6ACCD;">xhr</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">setRequestHeader</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Content-Type</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">application/json</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> body </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> JSON</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">stringify</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">a</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">b</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">xhr</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">send</span><span style="color:#A6ACCD;">(body)</span></span>
<span class="line"></span></code></pre></div><h2 id="http-持久连接" tabindex="-1">http 持久连接 <a class="header-anchor" href="#http-持久连接" aria-hidden="true">#</a></h2><h3 id="什么是持久连接" tabindex="-1">什么是持久连接 <a class="header-anchor" href="#什么是持久连接" aria-hidden="true">#</a></h3><p>在 http1.0 中，浏览器与服务器是短暂连接，发送一次 http 请求就需要建立一次 tcp 连接，请求完毕就关闭，头部默认是<code>Connection:close</code></p><p>HTTP1.1 中则默认是持久连接，头部为<code>Connection:keep-alive</code>，即在一次 tcp 连接中，可以有多次 http 的请求和响应，减少了建立和关闭连接的资源消耗</p><p>该特性在 http2.0 中会被忽略</p><h3 id="其它特点" tabindex="-1">其它特点 <a class="header-anchor" href="#其它特点" aria-hidden="true">#</a></h3><p>持久连接还有个特点，就是客户端不用等待上一个 http 请求的响应，即可发送下一次请求，但服务端必须按照收到的请求顺序依次返回响应结果，以保证响应正确</p><p>这个特点也叫<strong>持久连接的管线化技术</strong></p><h2 id="http-版本" tabindex="-1">http 版本 <a class="header-anchor" href="#http-版本" aria-hidden="true">#</a></h2><p>更多详细资料参考<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP" target="_blank" rel="noreferrer">MDN</a></p><h3 id="主要版本" tabindex="-1">主要版本 <a class="header-anchor" href="#主要版本" aria-hidden="true">#</a></h3><h4 id="http0-9" tabindex="-1">http0.9 <a class="header-anchor" href="#http0-9" aria-hidden="true">#</a></h4><p>最初的版本，只有<code>GET</code>方法</p><h4 id="http1-0" tabindex="-1">http1.0 <a class="header-anchor" href="#http1-0" aria-hidden="true">#</a></h4><p>增加<code>POST</code>和<code>HEAD</code>方法</p><p>每个 tcp 连接只能发送一次 http 请求，请求完成后关闭连接，如果需要再请求，则需要再次建立连接。</p><h4 id="http1-1" tabindex="-1">http1.1 <a class="header-anchor" href="#http1-1" aria-hidden="true">#</a></h4><p>1997 年 1 月发布</p><p>增加<code>PUT</code>、<code>PATCH</code>、<code>OPTIONS</code>、<code>DELETE</code>方法</p><p>引入<strong>持久连接</strong>，默认 TCP 连接不关闭，可以完成多次 http 请求，<code>Connection:keep-alive</code>是默认值</p><p>引入<strong>管线化技术</strong>，即同一个 tcp 连接里，可以同时发送多个 http 请求，而不用一个请求完成后再发送下一个请求，但服务端必须顺序处理并返回响应</p><p>额外的缓存控制机制</p><p>上面可能造成一个持久连接的阻塞，解决方法有：一个是减少请求数量，二个是多开持久连接。</p><p>同一个域名一般浏览器最多开六个持久连接。</p><h4 id="http2-0" tabindex="-1">http2.0 <a class="header-anchor" href="#http2-0" aria-hidden="true">#</a></h4><p>是 SPDY 的升级版</p><p>一句话概括：单个 TCP 连接支持并发的 HTTP 请求，压缩报头，去掉不必要的头部信息</p><p>http2.0 有以下特点：</p><ul><li><strong>二进制化</strong>：是二进制协议而不是文本协议，头信息和数据体都是二进制，称为头信息帧和数据帧。帧是 http2 中的最小传输单位，每个帧有一个<code>stream_ID</code>，所有相同 ID 的帧组成一个流，一个流就相当于一个请求。通过这个 ID，才有下面的无序发送和接收。</li><li><strong>多路复用</strong>：一个 TCP 连接可以同时有多个 http 请求，且不用像 http1.1 那样按顺序对应，因为采用了二进制分帧层。</li><li><strong>头信息压缩</strong>：http1.1 只是请求体采用 gzip 压缩，2 中头信息也会压缩。并且客户端和服务器会逐渐生成和维护一张表，所有头信息在其中，生成索引号，以后的请求一样的头信息发送索引号即可</li><li><strong>服务端推送</strong>：可以不经客户端请求，服务器主动推送资源，即 server push</li><li>http2.0 必须是 https</li></ul><h4 id="http3-0" tabindex="-1">http3.0 <a class="header-anchor" href="#http3-0" aria-hidden="true">#</a></h4><p>http 下一个主要版本，在传输层将使用 QUIC 替代 TCP/TLS。</p><h3 id="版本之间的区别" tabindex="-1">版本之间的区别 <a class="header-anchor" href="#版本之间的区别" aria-hidden="true">#</a></h3><h4 id="http1-0-和-http1-1-之间区别" tabindex="-1">http1.0 和 http1.1 之间区别 <a class="header-anchor" href="#http1-0-和-http1-1-之间区别" aria-hidden="true">#</a></h4><p>主要有以下几点：</p><ul><li>http1.1 支持持久连接，默认即持久连接，同时支持管线化技术</li><li>缓存优化，http1.0 使用<code>Expires和If-Modified-Since</code>配合做缓存，http2.0 中增加了<code>ETag和If-None-Match</code>、<code>Cache-Control</code>等来协商缓存</li><li>http1.1 更好的带宽优化，即 206 状态码，支持<code>Range</code>头请求文件的一部分数据</li><li>增加<code>Host</code>头，促进虚拟主机发展</li></ul><h2 id="https、ssl-tls" tabindex="-1">https、ssl/tls <a class="header-anchor" href="#https、ssl-tls" aria-hidden="true">#</a></h2><p>一句话：客户端向服务器索要公钥和证书，验证有效性，用非对称的公钥交流对称密码，之后的通信使用对称密码进行加密。</p><h3 id="_1-什么是-https" tabindex="-1">1.什么是 https <a class="header-anchor" href="#_1-什么是-https" aria-hidden="true">#</a></h3><p>超文本传输安全协议（hypertext Transfer Protocol Secure），是在应用层和传输层之间增加了一个<strong>安全层</strong>，安全层使用 ssl 或 tls 协议。</p><p>tls（transport layer security） 的前身是 ssl（secure sockets layer），ssl 由网景公司创建，后面一路标准化为 tls，tls1.0、1.1、1.2 相继发布，现在 tls1.3 是最新版。</p><h3 id="_2-为什么要有-https" tabindex="-1">2.为什么要有 https <a class="header-anchor" href="#_2-为什么要有-https" aria-hidden="true">#</a></h3><p>传统 http 传输是明文的，导致了它有以下缺点：<strong>容易被窃听、被篡改、被冒充</strong>。</p><p>而 https 的很好的解决了以上缺点，它有以下特征：<strong>加密、签名、数字证书</strong>。来保证通信安全。</p><h3 id="_3-https-的原理" tabindex="-1">3.https 的原理 <a class="header-anchor" href="#_3-https-的原理" aria-hidden="true">#</a></h3><p>要了解 https 的原理，需要了解以下几点：</p><ul><li>三种加解密基础知识</li><li>https 怎么做到安全通信</li><li>https 的交流过程</li></ul><h4 id="_3-1-三种加密基础知识" tabindex="-1">3.1 三种加密基础知识 <a class="header-anchor" href="#_3-1-三种加密基础知识" aria-hidden="true">#</a></h4><p><code>对称加密</code>：</p><p>加密和解密使用同一个密钥的算法。</p><p>优点：加解密速度快</p><p>缺点：安全性差，如果一方的密钥泄露，通信就会被泄露。另外双方需要同步密钥。</p><p>常用对称加密算法：DES、3DES、AES 等</p><p><code>非对称加密</code>：</p><p>通信双方使用不同密钥进行加密。分公开密钥和私有密钥。公钥私钥是一对，一般公钥用来加密，私钥用来解密，公钥公开出去，私钥自己保存。</p><p>优点：安全性好，不需要同步密钥。</p><p>缺点：速度慢，只适合对少量数据加密</p><p>常用非对称加密算法：RSA、D-H、ECC 等</p><p><code>HASH算法</code>：</p><p>也称信息摘要算法。将任意长度的二进制值映射成较短的固定的二进制值，这个值就是 hash 值。</p><p>常用于校验数据的完整性。</p><p>常用 hash 算法有：MD5（MD 系列）、SHA-1（SHA 系列）等</p><blockquote><p>https 使用了上面全部三种算法</p></blockquote><h4 id="_3-2https-怎么做到安全通信" tabindex="-1">3.2https 怎么做到安全通信 <a class="header-anchor" href="#_3-2https-怎么做到安全通信" aria-hidden="true">#</a></h4><p>https 使用对称密钥进行消息加密</p><p>那么对称密钥需要双方同步，怎么保证不被窃听呢？</p><p>那就要用到非对称加密，服务端发送给客户端公钥，客户端用公钥加密对称密钥相关数据，服务端用私钥解密，拿到对称密钥。之后就用这个密钥加密通信。</p><p>那客户端怎么确定服务端公布的公钥可信呢？</p><p>这就要由第三方权威机构来协助证明了，即<strong>证书颁发机构（CA, Certificate Authority）</strong>，客户端会预置一些大型可信 CA 的根证书（包含公钥、hash 算法等），服务器去 CA 机构申请，CA 机构把服务器的公钥、其它相关信息和特定 hash 算法对内容生成的签名，用自己的私钥进行加密，生成数字证书。客户端用预置的 CA 公钥解密证书，得到服务器非对称公钥、签名和其它信息，并用对应的 hash 算法对证书内容生成签名，验证证书中的签名是否正确。正确的话，那就证明证书中的公钥是服务器的公钥了。</p><h4 id="_3-3https-交流过程" tabindex="-1">3.3https 交流过程 <a class="header-anchor" href="#_3-3https-交流过程" aria-hidden="true">#</a></h4><p>主要分四步：</p><ul><li><strong>1.客户端发出请求（client hello）</strong></li></ul><p>客户端向服务端发送加密通信请求，客户端主要向服务端提供以下信息：</p><p>1.客户端支持的 ssl/tls 版本，比如 tls1.2</p><p>2.一个客户端生成的随机数</p><p>3.客户端支持的各种加密算法，对称、非对称、哈希三类都要有具体支持的</p><p>4.浏览器支持的压缩算法</p><ul><li><strong>2.服务端回应客户端（server hello）</strong></li></ul><p>服务端回应应该包含以下信息：</p><p>1.确认使用的加密通信协议版本，如 tls1.2。如果没有合适的，关闭通信</p><p>2.一个服务器生成的随机数</p><p>3.确认采用的各种加密方法，如 RSA 非对称加密算法、DES 对称加密算法、SHA-1 hash 算法</p><p>4.服务器证书</p><p>除了上面的，如果服务端要验证客户端，就需要向客户端索要客户端证书。如金融机构的 usb 密钥。</p><ul><li><strong>3.客户端回应</strong></li></ul><p>客户端收到服务器消息后，主要做下面的事：</p><p>首先验证服务器证书是否可信，如果证书不是可信机构颁发、用颁发机构公钥解密后检查信息不对（如域名）、证书过期，就会提示警告，由用户选择是否继续访问。</p><p>如果证书没问题，则取出证书中包含的服务器非对称公钥，然后向服务器发送以下信息：</p><p>1.一个随机数。这个随机数用服务端发来的非对称公钥进行非对称加密，防止窃听</p><p>2.编码改变通知，表示随后的通信都是用商定的加密算法进行通信</p><p>3.客户端握手结束通知。</p><p>然后，客户端使用三个随机数，计算生成接下来通信需要的对称加密密钥。</p><ul><li><strong>4.服务器回应</strong></li></ul><p>服务器收到消息后，取出被加密的随机数，用自己的私钥解密，加上前两个随机数，计算生成接下来通信需要的对称加密密钥。并发送以下信息：</p><p>1.编码改变通知。表示随后的通信都是用商定的加密算法进行通信</p><p>2.服务器握手结束通知。</p><blockquote><p>以上，握手结束后，客户端和服务器采用三个随机数计算生成的密钥进行加密通信。请求还是普通的 http 请求，只不过消息是被密钥加密后的消息。</p></blockquote></div></div></main><!--[--><!--]--><footer class="VPDocFooter" data-v-c5936a1e data-v-e033cd21><div class="edit-info" data-v-e033cd21><!----><div class="last-updated" data-v-e033cd21><p class="VPLastUpdated" data-v-e033cd21 data-v-355aa5ef>更新时间: <time datetime="2023-03-01T15:45:52.000Z" data-v-355aa5ef></time></p></div></div><div class="prev-next" data-v-e033cd21><div class="pager" data-v-e033cd21><a class="pager-link prev" href="/blog/interviews/react-for-frontend-interview-questions-collection.html" data-v-e033cd21><span class="desc" data-v-e033cd21>前一篇</span><span class="title" data-v-e033cd21>前端知识点之react篇</span></a></div><div class="has-prev pager" data-v-e033cd21><a class="pager-link next" href="/blog/interviews/babel-for-frontend-interview-questions-collection.html" data-v-e033cd21><span class="desc" data-v-e033cd21>下一篇</span><span class="title" data-v-e033cd21>前端知识点之babel篇</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><!----><!--[--><!--]--></div></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"about_me.md\":\"a6963ed5\",\"about_contact.md\":\"753dd087\",\"blog_interviews_project-for-frontend-interview-questions-collection.md\":\"3ac3f621\",\"blog_svg_jiaohu.md\":\"bdc89024\",\"index.md\":\"ac84e241\",\"blog_svg_lujing.md\":\"2247252e\",\"blog_svg_lvjing.md\":\"7fb98f9e\",\"blog_svg_rumen.md\":\"760fcfc8\",\"blog_svg_tuanhejianbian.md\":\"1d67f731\",\"blog_svg_userspaceonuse-and-objectboundingbox.md\":\"7135675e\",\"blog_svg_wendangjiegou.md\":\"659e2114\",\"english_how.md\":\"47ca54fc\",\"blog_svg_zuobiaoxitong.md\":\"9f073aa7\",\"blog_svg_zuobiaoxitongbianhuan.md\":\"09c91562\",\"english_howtolearnword.md\":\"29e67a9c\",\"english_plan.md\":\"d3863f0d\",\"english_string.md\":\"afd02e54\",\"blog_interviews_css-for-frontend-interview-questions-collection.md\":\"ad8ec08c\",\"blog_interviews_index.md\":\"7922302b\",\"blog_interviews_javascript-for-frontend-interview-questions-collection.md\":\"1f97ba08\",\"blog_interviews_mian-shi-xin-de.md\":\"f249f58c\",\"blog_interviews_pingtouge-interview-questions-collection.md\":\"01898e13\",\"life_car_baoxian.md\":\"1a0484fd\",\"life_index.md\":\"294ee10b\",\"life_car_jiaotongshiguchuli.md\":\"2dfb478a\",\"life_car_kaiche.md\":\"fb68bff5\",\"photograph_fujifilm_renxiangpeifang.md\":\"df9d71f0\",\"photograph_fujifilm_jiappianjichu.md\":\"e4797107\",\"blog_readingnotes_browserprinciple.md\":\"5600b029\",\"blog_interviews_webpack-for-frontend-interview-questions-collection.md\":\"5e087073\",\"photograph_fujifilm_fengguangpeifang.md\":\"1f3c5cc8\",\"blog_summary_20210702.md\":\"992c6ebc\",\"blog_summary_20210716.md\":\"27df70fd\",\"blog_summary_20210723.md\":\"b3df6f63\",\"blog_summary_20210730.md\":\"0fd6c31f\",\"blog_readingnotes_jsgc4-2.md\":\"754107dd\",\"blog_summary_20210806.md\":\"8ede013a\",\"blog_svg_caijianhemengban.md\":\"345a71fa\",\"blog_readingnotes_jsgc4.md\":\"badec6ec\",\"blog_2020_07_accumulation-fund-transform.md\":\"ea36b833\",\"blog_svg_jibenxingzhuang.md\":\"3d07ebc2\",\"photograph_home.md\":\"289914d9\",\"photograph_fujifilm_xiangjishezhi.md\":\"c859f451\",\"photograph_sheyingzhishi.md\":\"7db1fab8\",\"photograph_xiangjixuanze.md\":\"b38cb6f4\",\"wemedia_what.md\":\"1d28f58c\",\"wemedia_emoji.md\":\"234e5631\",\"blog_2020_07_css-modules-docs.md\":\"4575442d\",\"blog_2020_07_git-docs.md\":\"22c9808c\",\"blog_2020_07_http-cache-and-nginx-config.md\":\"82b01b17\",\"blog_svg_donghua.md\":\"87326708\",\"blog_2020_06_gatsby-markdown-blog-system.md\":\"87de2558\",\"blog_2020_06_ubuntu14.04-install-nginx-for-source-code.md\":\"eff6df3c\",\"blog_2020_07_throttle-and-debounce.md\":\"745f9ff3\",\"blog_2020_07_regex-in-javascript.md\":\"375103f6\",\"blog_finance_income.md\":\"90b9a5cf\",\"blog_interviews_safe-for-frontend-interview-questions-collection.md\":\"6ae808c2\",\"blog_2020_07_vim-docs.md\":\"50a62a76\",\"blog_2020_08_fiddler.md\":\"29bf9a9b\",\"blog_2020_11_webpack-how-to-load-chunks.md\":\"2fc96bb0\",\"blog_2020_07_use-react-framework-web-site.md\":\"f836a6bd\",\"blog_interviews_algorithm-javascript.md\":\"72bdd42b\",\"blog_summary_20210611.md\":\"4cc8a1ab\",\"blog_summary_20210529.md\":\"fb886442\",\"blog_interviews_babel-for-frontend-interview-questions-collection.md\":\"495cb8da\",\"blog_summary_20210124.md\":\"ee3946e0\",\"blog_summary_20210619.md\":\"ef11c68e\",\"blog_summary_20210626.md\":\"5d8d583c\",\"blog_svg_wenben.md\":\"4aaeb73b\",\"blog_interviews_html-for-frontend-interview-questions-collection.md\":\"78197e40\",\"blog_interviews_react-for-frontend-interview-questions-collection.md\":\"90e3af48\",\"blog_interviews_http-for-frontend-interview-questions-collection.md\":\"1129730d\",\"blog_frontend_library.md\":\"34c972ff\",\"blog_readingnotes_reactandnodejs.md\":\"8a99114b\"}")</script>
    <script type="module" async src="/assets/app.6facf8ba.js"></script>
    
  </body>
</html>